<template>
   <div class="login">
        <div class="boxbg"><img :src=codeImg[2]></div>
        <div class="logcon">
       <!--App二维码 -->
                <div class="boxFath">
                        <div class="wxdown">
                            <div class="borderBox"><div></div> <img :src=codeImg[0] ></div> 
                            <p> 苹果App下载</p>
                            <div class="borderBox"><div></div> <img :src=codeImg[0] ></div>
                            <p> 安卓App下载</p>   
                        </div> 


                        <!-- 登陆框login -->
                        <div class="box">
                                <div id="loginBoxBack"></div>
                                <div class="logo2"></div>
                                <div class="logo ">
                                    <canvas class="logoRay" width="140px" id="canvas" height="140px"></canvas>
                                    <!-- <div class="logoRay">
                                        <div class="ray"></div>
                                    </div> -->
                                </div>
                                <div class="conter">
                                    <div class="boxtab animated2 bounceInLeft">
                                    <input name="" type="text" id="UserId" class="txt1" value="" placeholder="登录名" v-model="UserId">
                                    </div>
                                    
                                    <div class="boxtab vis" >
                                    <input name="" type="password" id="Pwd" class="txt1" value="" placeholder="密码" v-model="Pwd">

                                    </div>
                                    
                                    <div class="boxtab vis">
                                        <input name="" type="text" class="txt2" value="" placeholder="验证码" > 
                                        <img :src=codeImg[1] width="134" height="58">
                                    </div>
                                    <div class="tishi"></div>
                                    <div class="boxtab vis" >
                                    <!-- <span><a href="./gameTable.html" ><img src="images/btn2.png" width="173" height="54"></a></span> -->
                                        <a href="javascript:;" id="Dl" @click="dl_go"></a>

                                    </div>                                            
                                </div>

                        </div> 
                    </div>  
        </div>  

       
        <!-- 更换浏览器提示 -->
        <div id="GG" v-if="GG">
            <h1>溫馨提示</h1>
            <div class="Center">
                    <p>
                        尊敬的用戶，您當前瀏覽器版本過低無法進性遊戲體驗，請您更換高版本的瀏覽器（<span>谷歌瀏覽器</span>、<span>火狐瀏覽器</span>、<span>QQ瀏覽器</span>、<span>IE10</span>或其他高版本瀏覽器）進性優秀暢快的遊戲體驗。
                    </p>
                    <br>
                    <p>
                            尊敬的用户，您当前浏览器版本过低无法进性游戏体验，请您更换高版本的浏览器（<span>谷歌浏览器</span>、<span>火狐浏览器</span>、<span>QQ浏览器</span>、<span>IE10</span>或其他高版本浏览器）进性优秀畅快的游戏体验。
                    </p>
            </div>             
        </div>
       
       
        


         <div id="UsrGG" v-if="GGisShow">
            <h1>用戶協議書</h1>
                <div class="Center">
                        <p>
                                本公司是合法互聯網絡交易機構,現提醒有意參與本公司所有遊戲之客戶,應注意其國家或居住地區的相關法律規定,如有疑問,應就相關問題尋求當地法律意見。
                                <br>
                                <br>
                                交易聲明
                                <br>
                                <br>
                                如客戶對本遊戲有任何問題或疑問時,請立即停止遊戲,並實時與你的上線代理聯絡跟進事件。如客戶仍繼續參與遊戲,即表示瞭解及接受所發生的問題。本公司有權在這問題上不作出任何解釋或跟進,敬請客戶留意！
                                <br>
                                請客戶確保處於穩定網絡環境下進行本遊戲,因網絡速度問題而出現不穩定情況,客戶必須理解及接受。本公司不接受使用無聯機網咭參與本遊戲的客戶投訴。所有因網絡因素引起的「投注是否成功」問題,最終結果會以本公司的數據庫數據,相等於客戶投注前台右下方的「記錄」功能內,所顯示的投注記錄為準,用戶不得異議。
                                <br>
                                倘若發生不可抗拒的災害或人為的入侵破壞行為,而導致網站故障,數據損壞,數據丟失等情況,會以本網站的最終數據為最後處理數據。為確保各方的真實利益,請各會員保留或打印投注數據,本網站才接受投訴及處理。本公司保留判定任何涉嫌以非正常方式進行投注的客戶投注無效之權利因人為而導致的發牌錯誤,如﹕
                                發牌方向或次序錯誤。
                                <br>
                                不正確之顯示或結果(此情況會發生於發牌時連發兩張或以上的牌)。本公司會按照正常的「牌理」和次序還原至正確的結果,最終結果將按還原至正確的結果計算。
                                <br><br>
                                
                                責任聲明
                                <br><br>
                                
                                用戶在進行遊戲前應核實其所在地區進行聯機遊戲是否符合當地法律。
                                <br>
                                為避免任何爭議,各用戶在參與本網站所有遊戲過程中,或在結束參與本網站所提供的遊戲前,必須檢查會員賬戶內的數據是否正確。若發現有錯誤,請實時與所屬的代理商聯絡。客戶若不能提供充份的數據,其賬戶內之一切數據或歷史數據,以本公司數據庫中的數據為準,用戶不得異議。
                                <br>
                                本網站只向符合法定年齡的用戶提供服務,用戶須注意其居住地區的法律年齡限制,在不違反年齡限制之下才可使用本網站服務。
                                <br>
                                本公司將不承擔任何用戶因違反當地相關法律而引起的任何責任。
                                <br>
                                任何用戶在參與本公司所有遊戲而觸犯當地法律之任何責任,本公司概不負責。
                                <br>
                                用戶有義務保障本身的用戶名稱和密碼的隱私安全,並且不應允許任何第三方以任何形式,通過該用戶名稱和密碼使用本網站之所有遊戲,否則,一切責任需由該用戶全部承擔。
                                <br>
                                安裝、使用及或參與本軟件所有遊戲之用戶,均被視為符合該用戶當地之法定年齡,以及該用戶完全明白並且同意本協議之內容。
                                <br>
                                本網站有權拒絕或不接受任何用戶以任何不正當方式登入或參與本網站所有遊戲之權利。
                                <br>
                                因人為或系統發生不能預測因素所導致的失誤,本公司管理層保留最終之決定權。不論在任何情況下,本公司之決定權乃最終之決定權。
                                <br>
                                若本公司發現會員以團體方式進行交易,如以對碰形式多次下注同一局牌,本公司將保留'取消'該非正常注單或只保留一張注單之權利。
                                <br>
                                若本公司發現會員以不公平方式進行遊戲,本公司有權將該會員所贏之注單一律取消,而保留其餘注單之權利。
                        </p>
                </div>
                <div class="ps">
                    <a href="javascript:;" onclick="openUserGG()">不同意</a>
                    <!-- <a href="./gameTable.html#/index/1">同意</a>                      -->
                    <router-link to="table">同意</router-link>
                </div>
         
        </div>



   </div>
</template>
<script>
import codeImg from "@/assets/img/wx1.jpg";
import code from "@/assets/img/yzm.png";
import bgbg2 from "@/assets/img/bgbg2.jpg";
import $ from 'jquery'
window.$ = $;
// import "@/assets/js/index.js"
export default {
  name: "login",
  data() {
    return {
      codeImg: [codeImg,code,bgbg2],
      UserId:"",
      Pwd:"",
      GGisShow:false,
      GG:false,
      
    };
  },
  methods:{
      //登陆器按钮逻辑
      dl_go(){
          console.log(this.$data.UserId);
          //账号密码非空提示
           if(this.$data.UserId==""){
            $("#UserId").css({"animation":"shake 0.8s","box-shadow":"0px 0px 4px 2px red"});
            setTimeout(()=>{
                $("#UserId").css("animation","none");
            },1000)
            return false;
        }

            if(this.$data.Pwd==""){
                $("#Pwd").css({"animation":"shake 0.8s","box-shadow":"0px 0px 4px 2px red"});
                setTimeout(()=>{
                    $("#Pwd").css("animation","none",);
                },1000)
                return false;
        }
         $("#loginBoxBack").css("display","block");
         var that = this;
         console.log(that.$data.Pwd); 
        //  this.$router.push("gameTable");
         $.ajax({
            url:that.api.login,
            type:"POST",
            data:{UserId:this.UserId,Pwd:this.Pwd,loginType:4},
            success:function(data){
                $("#loginBoxBack").css("display","none")
                if(data.State!=1000){
                    alert(data.Msg)
                }else{
                    console.log(data)
                    sessionStorage.setItem("Tonken",data.Msg.RandCode);
                    // sessionStorage.setItem("ws",data.Msg.Gate);
                    sessionStorage.setItem("ws","192.168.1.181:29702");
                    sessionStorage.setItem("UserId",this.UserId);
                     that.GGisShow=true;
                    that.openUserGG();
                    // this.$router.push("table");
                    
                }
            },
            error:function(data){
                $("#loginBoxBack").css("display","none")
                alert("登陆失败，网络错误")
            }
        })
        

      },
      openUserGG(){
           var a= $("#UsrGG").css("display");
            if(a=="none"){
                $("#UsrGG").css("display","block");
            }else{
                $("#UsrGG").css("display","none");
                sessionStorage.clear()
            }
      }
     
  },
   mounted(){
          window.onload=function(){
            var canvas=document.getElementById("canvas").getContext("2d");
            var img=new Image();
            img.src="";
            img.onload=function(){
                canvas.drawImage(img,-90,0);
                var xx=0;
                setInterval(function(){
                    if(xx>90){
                        xx=-90
                    }else{
                    xx++;  
                    }
                    canvas.clearRect(0,0,140,140);
                    canvas.drawImage(img,xx,0);
                },10)
            }
            document.addEventListener('DOMContentLoaded', function () {
                // chrome 浏览器直接加上下面这个样式就行了，但是ff不识别
                document.body.style.zoom = 'reset';
                document.addEventListener('keydown', function (event) {
                    if ((event.ctrlKey === true || event.metaKey === true)
                    && (event.which === 61 || event.which === 107
                        || event.which === 173 || event.which === 109
                        || event.which === 187  || event.which === 189))
                        {
                        event.preventDefault();
                        }
                }, false);
                document.addEventListener('mousewheel DOMMouseScroll', function (event) {
                    if (event.ctrlKey === true || event.metaKey) {
                        event.preventDefault();
                    }
                }, false);
            }, false);
            var animationEnd = (function(el) {
                var animations = {
                    animation: 'animationend',
                    OAnimation: 'oAnimationEnd',
                    MozAnimation: 'mozAnimationEnd',
                    WebkitAnimation: 'webkitAnimationEnd',
                };

                for (var t in animations) {
                    if (el.style[t] !== undefined) {
                    return animations[t];
                    }
                }
            })(document.createElement('div'));
            //  $('.boxtab').css("visibility","hidden");
            $('.boxtab').eq(0).one(animationEnd, function(){
                $('.boxtab').eq(1).attr("class","boxtab animated2 bounceInLeft");
            });
            $('.boxtab').eq(1).one(animationEnd, function(){
                $('.boxtab').eq(2).attr("class","boxtab animated2 bounceInLeft")
            });
            $('.boxtab').eq(2).one(animationEnd, function(){
                $('.boxtab').eq(3).attr("class","boxtab animated2 bounceInLeft")
            });
            $('.boxtab').eq(3).one(animationEnd, function(){
                $('.conter').attr("class","conter animated tada")
            });
          

            var a=new Image();
            a.src="./static/img/fb4f10dac339607a456b9b9bf23c3b3e.jpg";
            var b=new Image();
            b.src="./static/img/ecc625c4ad93baa1119a5f730067a943.jpg";
            var c=new Image();
            c.src="./static/img/1a2dc9b5ed0db97c4677fb23548f4b2e.png"
            var d=new Image();
            d.src="./static/img/85c4ae30fdeea704c8d41f56632aa4a7.png"        
        }
        }
};
</script>


